<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#top{
				width: 1190px;
				height: 36px;
				background: #f5f5f5;
				margin: 0 auto;
			}
			#top .top1{
				height: 36px;
				float: left;
			}
			#top .top2{
				height: 36px;
				float: right;
			}
			#top .top1 ul{
				list-style: none;
				line-height: 36px;
			}
			#top .top1 .ul1 li{
				float: left;
			}
			#top .top1 .ul1 li .list1{
				position: relative;
				left: 20px;
			}
			#top .top1 .ul1 .ul2 li{
				width: 200px;
				height: 50px;
				background: red;
				overflow-y: auto;
				height: 50px;
				float: none;
				display: none;
			}
			#top .top1 .ul1 .ul2 li:hover{
				/* width: 300px; */
				/* height: 50px; */
				background: yellow;
			}
			#top .top1 .ul1:hover .ul2 li{
				display: block;
			}
		</style>
		
	</head>
	<body>
		<div id="top">
			<div class="top1">
				<ul class="ul1">
					<li><div class="list">中国大陆</div>
					<ul class="ul2">
						<li><div>中国</div></li>
						<li><div>美国</div></li>
						<li><div>韩国</div></li>
						<li><div>日本</div></li>
					</ul>
					</li>
					<li><div class="list1">亲，请登录</div></li>
					<li><div class="list2">免费注册</div></li>
					<li><div class="list3">手机逛淘宝</div></li>
				</ul>
			</div>
			<div class="top2"></div>
		</div>
	</body>
</html>
